<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/common :: headBar(~{::title}, ~{::link})">
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/custom.css}">
</head>
<body>
<!--layui.js-->
<script th:replace="layout/common :: #layuiJS"></script>
<!--axios-->
<script th:replace="layout/common :: #axios"></script>

<!--引入顶部导航栏-->
<div th:replace="layout/common :: topBar(myTarget='_self')"></div>

<!--分割线-->
<hr class="layui-bg-green">

<!--注册表单-->
<div class="register-form">
    <form class="layui-form layui-form-pane" action="" th:action="@{/user/reg}" method="post">
        <!--用户名是后台唯一生成的，用来登录的账号-->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="username"
                       placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="pass" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">不能为空</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="checkPassword" required lay-verify="checkPass" placeholder="请再次输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux check-password"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" title="男">
                <input type="radio" name="gender" value="0" title="女" checked>
                <input type="radio" name="gender" value="2" title="其他">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" required lay-verify="date" placeholder="请输入生日" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">个人描述</label>
            <div class="layui-input-block">
                <textarea name="selfDesc" placeholder="个人描述" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    //Demo
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;

        // 自定义表单验证
        form.verify({
            username: function (value, item) { // value是表单的值，item是表单的DOM对象
                if (!value) {
                    return '用户名不能为空';
                }

                value = value.trim();

                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
                if (value.length > 12) {
                    return '用户名不能超过12位';
                }

                // 校验用户名是否存在
                axios
                    .get("/user?username=" + value)
                    .then(function (response) {
                        if (response.data.code === 400) {
                            layer.open({
                                anim: 1,
                                title: '后台提示',
                                content: response.data.msg
                            });
                        }
                    });
            },

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            pass: function (value, item) {
                if (!value) {
                    return '密码不能为空';
                }

                // 去除首尾空格
                value = value.trim();

                if (value.length == 0) {
                    return '密码不能全为空格';
                }
                if (value.length < 6 || value.length > 12) {
                    return '密码必须是6到12位';
                }
            },


            // 校验两次输入的密码是否一致
            checkPass: function (value, item) {
                var pass = $('input[name=password]').val();
                if (value != pass) {
                    return '两次输入的密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            // 发送添加请求
            axios.post('/user/reg', data.field)
                .then(function (response) {
                    if (response.data.code === 200) {
                        // 处理注册成功逻辑
                        layer.open({
                            anim: 1,
                            title: '注册成功',
                            content: '<span><i class="layui-icon layui-icon-face-smile" style="font-size:30px; color: #1E9FFF;"></i><br />注册成功，去登录...</span>',
                            btn: ['确定'],
                            yes: function (index, layero) {
                                // 关闭
                                layer.close(index);
                                window.location.href = '/user/login';
                            }
                        });

                        return;
                    }

                    if (response.data.code === 400) {
                        layer.open({
                            anim: 1,
                            title: '注册失败',
                            content: '错误原因为:<br />' + response.data.data,
                            btn: ['确定'],
                            yes: function (index, layero) {
                                layer.close(index);
                            }
                        });

                        return;
                    }

                    layer.msg('注册发生异常，请刷新重试');
                })
                .catch(function (reason) {
                    console.log(reason);
                });

            return false;
        });
    });
</script>

</body>
</html>